<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div id="app"></div>

    <script src="../../js/react.development.js"></script>
    <script src="../../js/react-dom.development.js"></script>
    <script src="../../js/babel.min.js"></script>


    <script type="text/babel">

        function Login(props) {
            const { login } = props
            return (
                <div>
                    <h1>请先登录</h1>
                    <button onClick={login}>登录</button>
                </div>
            )
        }



        function Title(props){
            const {title,id} = props
            return (
                <li ><span>{title}</span></li>
            )
        }

        // Each child in a list should have a unique "key" prop.
         
        function ListContainer(props){
            let {data} = props

            // let listItems = data.map(item=><li key={item.id}><span>{item.title}</span></li>) // jsx => {变量}
            
            // key 添加 : 就近(数据源)原则 
            // key 唯一性 : 在兄弟节点之间 是唯一的; 在全局下可以 不唯一 
            let listItems = data.map(item=><Title key={item.id} title={item.title}/>) // jsx => {变量}

            return (
                <ul>
                    {listItems}
                </ul>
            )
        }

        function Content(props){

            const {title,content} = props

            return (
                <div >
                    <h3>{title}</h3>
                    <span>{content}</span>
                </div>
            )
        }

        //文章内容
        function Posts(props){
            const {posts} = props

            //自定义
            // const contents =  posts.map(item=>{
            //     return (
            //         <div key={item.id}>
            //             <h3>{item.title}</h3>
            //             <span>{item.content}</span>
            //         </div>
            //     )
            // })
            
            const contents =  posts.map(item=>{
                return (
                   <Content key={item.id} title={item.title} content={item.content}/>
                )
            })

            const sidbar = <ListContainer data={posts}/>

            return (
                <div>
                    <div>{sidbar}</div>
                    <div>{contents}</div>
                </div>
            )
        }

        //登录成功后页面
        function Welcome(props) {
            const { logout,posts } = props
            return (
                <div>
                    <h1>欢迎，您已登录</h1>
                    <button onClick={logout}>退出</button>

                    {/*文章内容列表*/}
                    <Posts posts={posts} />
                </div>
            )
        }


        class App extends React.Component {
            //状态
            state = { isLogin: false,posts:[]}  //false 未登录


            handleLogin = async () => {
                this.setState({ isLogin: true })
            }

            handleLogout = async () => {
                this.setState({ isLogin: false })
            }


            render() {
                console.log('render');
                    return (
                    <div>
                        {
                            this.state.isLogin ? <Welcome logout={this.handleLogout} posts={this.state.posts}/> : <Login login={this.handleLogin}/>
                        }
                    </div>
                )

            }

            componentDidMount(){
                //获取文章数据
                const posts =[{
                    id:1,title:'title1',content:'welcome to habin heilongjiang'
                },{
                    id:2,title:'title2',content:'welcome to habin heilongjiang'
                },{
                    id:3,title:'title2',content:'welcome to habin heilongjiang'
                }]
                //同步组件状态

                this.setState({posts:posts})

            }
        }


        // 分析：状态 页面 事件

        // 定义状态

        // 定义页面

        // 状态和页面关系

        // 定义改变状态事件  （状态在哪 定义事件就在哪里）

        // button 和 事件关系  事件传递  =》类组件定义 
        //                             =》子组件 事件传递

    

        ReactDOM.render(<App />, document.getElementById('app'))
    </script>
</body>

</html>